<template>
    <div class="serviceheader" id="serviceheader">
        <img alt="Vue logo" src="../assets/logo.png" height="40%">
        <h1>酒店服务助手</h1>
    </div>
</template>

<script>
import { createApp } from 'vue';
createApp({
    mounted(){
        window.addEventListener('scroll', this.handleScroll)
    },
    methods:{
        handleScroll () {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            // console.log(scrollTop)
            var offsetTop = document.querySelector('#searchBar').offsetTop
            if (scrollTop > offsetTop) {
                this.searchBarFixed = true
            } else {
                this.searchBarFixed = false
            }
        },
        
    },
    unmounted () {
        window.removeEventListener('scroll', this.handleScroll)
    },
})

export default {
    name: "serviceHeader",
    props: {
        msg: String,
    },
}
</script>


<style scoped>
.serviceheader{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
	background-color: rgb(215, 255, 215);
    top: 0%;
    width: 100%;
    height: 15%;
    z-index: 5;/*覆盖优先度 */
}    

img{
    margin-right: 10pt;
}
</style>